<script setup lang="ts">
import BlogContent from "@/components/BlogContent/index.vue";

const specialColumns = ref([
  {
    id: 0,
    title: '全部'
  },
  {
    id: 1,
    title: 'VuePress主题开发'
  },
  {
    id: 2,
    title: '前端技术'
  },
  {
    id: 3,
    title: '后端技术'
  },
  {
    id: 4,
    title: '编程语言'
  },
  {
    id: 5,
    title: '软件工具'
  }
])

const activeCategoryId = ref(0)
/*所展示的文章*/
const articleList = ref([
  {
    artId: 1,
    artTitle: 'VuePress主题开发指南',
    artTag: ['VuePress', '主题', '开发'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    publishTime: '2021-08-01 12:12:20'
  },
  {
    artId: 2,
    artTitle: '前端技术趋势',
    artTag: ['前端', '技术', '趋势'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    publishTime: '2021-08-01 12:12:20'
  },
  {
    artId: 3,
    artTitle: '后端技术架构',
    artTag: ['后端', '技术', '架构'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    publishTime: '2021-08-01 12:12:20'
  },
  {
    artId: 4,
    artTitle: '编程语言的演变',
    artTag: ['编程语言', '演变'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    publishTime: '2021-08-01 12:12:20'
  }
])
</script>

<template>
  <BlogContent style="padding-top: 16px">
    <!-- 文章专栏    -->
    <div class="special-columns box-shadow-card">
      <div class="special-item" :class="{'active': column.id===activeCategoryId}" v-for="column in specialColumns"
           :key="column.id" @click="activeCategoryId = column.id">
        <span class="special-title">{{ column.title }}</span>
      </div>
    </div>
    <!-- 文章列表    -->
    <div class="article-list" style="margin-top: 16px">
      <div class="article-item box-shadow-card" v-for="article in articleList" :key="article.artId">
<!--        <img :src="article.artCoverUrl" alt="封面图" class="article-cover">-->
        <div class="article-info">
          <h3 class="article-title">{{ article.artTitle }}</h3>
          <p class="article-tags">
            <span v-for="tag in article.artTag" :key="tag" class="tag">{{ tag }}</span>
          </p>
          <p class="article-date">创建时间: {{ article.createTime }}</p>
          <p class="article-publish-date">发布时间: {{ article.publishTime }}</p>
        </div>
      </div>
    </div>
  </BlogContent>
</template>

<style scoped lang="scss">

.special-columns {
  padding: 2px;
  border-radius: 8px;

  .special-item {
    display: inline-block;
    padding: 2px 8px;
    margin: 4px;
    background-color: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    color: #333;
    &.active {
      background-color: var(--blog-primary-color) ;
      color: #FFF;
    }

    &:hover {
      background-color: #e0e0e0;
    }

    .special-title {
      font-size: 14px;
    }
  }
}

.article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  .article-item {
    width: calc(33.333% - 16px);
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;

    .article-cover {
      width: 120px;
      height: auto;
      object-fit: cover;
    }

    .article-info {
      padding: 16px;
      flex-grow: 1;

      .article-title {
        font-size: 18px;
        margin-bottom: 8px;
      }

      .article-tags {
        margin-bottom: 8px;

        .tag {
          display: inline-block;
          padding: 2px 6px;
          background-color: #e0e0e0;
          border-radius: 4px;
          margin-right: 4px;
          font-size: 12px;
        }
      }

      .article-date,
      .article-publish-date {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

</style>
